<template>
  <div class="week_wrap">
    <!-- 显示日期 -->
    <div class="top_bar">
      <span>周一</span>
      <span>周二</span>
      <span>周三</span>
      <span>周四</span>
      <span>周五</span>
      <span>周六</span>
      <span>周日</span>
    </div>
    <!-- 左侧的节次 -->
    <div class="left_bar">
      <span>{{info.curWeek}}周</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
      <span>10</span>
      <span>11</span>
    </div>
    <!-- 显示课程 -->
    <div class="course_content">
      <course-item 
        v-for="(item, index) in info.courses" 
        :info="item" 
        />
    </div>
    <div class="background"></div>
  </div>
</template>

<script>
  import CourseItem from '@/components/home/education/Course/CourseItem'
  export default {
    name: 'WeekCourse',
    components: {
      CourseItem
    },
    props: {
      info: {
        type: Object,
        default() {
          return {
            curWeek: 0,
            courses: []
          }
        }
      }
    }
  }
</script>

<style scoped>
  .week_wrap {
    background-color: #f2f6fc;
    position: relative;
    width: 100%;
    height: 100%;
    /* overflow-y: auto; */
    /* overflow-x: auto; */
  }

  .top_bar {
    display: flex;
    position: absolute;
    width: calc(100% - 20px);
    left: 20px;
    top: 0;
  }

  .top_bar span {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 40.8px;
  }

  .left_bar {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    text-align: center;
  }

  .left_bar span {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .course_content {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(11, 1fr);
    position: absolute;
    left: 20px;
    top: 40.8px;
    width: calc(100% - 20px);
    height: calc(100% - 40.8px);
    background-color: #ebeef5;
    z-index: 1;
    opacity: 0.9;
  }

  .background {
    background: url("../../../../assets/img/background.jpg") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 20px;
    top: 40.8px;
    width: calc(100% - 20px);
    height: calc(100% - 40.8px);
    z-index: 0;
  }

  /* 定义不同课程的样式 */
  ._1 {
    /* 星期一 */
    grid-column-start: 1;
    grid-column-end: 2;
  }

  ._2 {
    /* 星期二 */
    grid-column-start: 2;
    grid-column-end: 3;
  }

  ._3 {
    /* 星期三 */
    grid-column-start: 3;
    grid-column-end: 4;
  }

  ._4 {
    /* 星期四 */
    grid-column-start: 4;
    grid-column-end: 5;
  }

  ._5 {
    /* 星期五 */
    grid-column-start: 5;
    grid-column-end: 6;
  }

  ._6 {
    /* 星期六 */
    grid-column-start: 6;
    grid-column-end: 7;
  }

  ._7 {
    /* 星期天 */
    grid-column-start: 7;
    grid-column-end: 8;
  }

  ._12 {
    /* 第一大节 */
    grid-row-start: 1;
    grid-row-end: 3;
  }

  ._34 {
    /* 第二大节 */
    grid-row-start: 3;
    grid-row-end: 5;
  }

  ._14 {
    /* 一二大节 */
    grid-row-start: 1;
    grid-row-end: 5;
  }

  ._56 {
    /* 第三大节 */
    grid-row-start: 5;
    grid-row-end: 7;
  }

  ._78 {
    /* 第四大节 */
    grid-row-start: 7;
    grid-row-end: 9;
  }

  ._58 {
    /* 三四大节 */
    grid-row-start: 5;
    grid-row-end: 9;
  }

  ._57 {
    /* 567小节 */
    grid-row-start: 5;
    grid-row-end: 8;
  }

  ._910 {
    /* 晚课：两节 */
    grid-row-start: 9;
    grid-row-end: 11;
  }

  ._911 {
    /* 晚课：三节 */
    grid-row-start: 9;
    grid-row-end: 12;
  }

  ._11 {
    /* 晚课：第三节 */
    grid-row-start: 11;
    grid-row-end: 12;
  }
</style>